<template>
  <div class="class-container">
      <header>
       <ul >
        <li v-for="(value,index) in list1" 
           :key="index+value" 
         :class="{active:active==index}" 
         @click="handleclick(index)">{{value}}
       
         </li>
               
    </ul>  
    <div>
        <ol class="city">
            <li is-link @click="showPopup" >{{hotall}} <span class="yo-ico">&#xe60e;</span> </li>
            <li is-link @click="showPo">{{this.choosedate}}<span class="yo-ico">&#xe60e;</span> </li>
            <li>推荐排序 <span class="yo-ico">&#xe60e;</span> </li>
            <li>距离最近 </li>         
        </ol>
        <van-popup v-model="showpo" 
  :style="{ height: '60%' , width:'100% '}" class="datepu"> 
   <el-date-picker
      v-model="value1"
      type="date"
      :picker-options="pickerOptions"
       size="large"
       @change='handelchange(value1)'
      placeholder="选择日期">
    </el-date-picker>
  </van-popup>
        </div> 
      </header>
      <main>    
        <Morelist  :parentlist="parentlist" :hotall="hotall"></Morelist> 
          <van-popup v-model="show"  position="bottom"
  :style="{ height: '85%' }"  :overlay="false">
  <div>
   <div class="hotcity">
       <p>热门城市/区域</p>
       <ul>
           <li 
           v-for="(value,index) in hotcity"
           :key="value+index"
           @click="hotclick(value)"
           > 
           {{value}}            
           </li>
       </ul>
   </div>
   <div class="allcity">
     <ol>
       <li
        v-for="(value,index) in allcities"
        :key="value+index"
        > <h4>{{value.letter}}</h4>        
        <p 
        v-for="(value1,index1) in value.data"
        :key="value1+index1"
        @click="allclick(value1)"
        >{{value1}} </p>  </li>
     </ol>
   </div>
  </div>
  </van-popup>
      </main>
  </div>
</template>

<script>
import {get} from  '../utils/http.js' 
import city from  '../utils/city.js' 
import BScroll from 'better-scroll'
import moment from 'moment'
import { Loading,Toast,Popup} from 'vant';
import Vue from 'vue'
Vue.use(Loading).use(Popup)
import Morelist from '../components/classify/more-list.vue'
import {DatePicker} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(DatePicker);
export default {
        data () {
    return {
       list1:['演唱会','话剧歌剧','音乐会','曲苑杂坛','舞蹈芭蕾','体育','儿童亲子','展览休闲','二次元','旅游展览'],
       active:1,
       ctl:'',
       parentlist:[],
       show:false,
       hotcity:[],
       allcities:[],
       hotall:'北京',
       showpo:false,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
        },
        value1: '',
        choosedate:'全部时间'
    }
},
   
methods: {
 async  handleclick(index){
    this.active=index
    this.ctl=this.list1[index]    
    let result = await get({
      url: `https://search.damai.cn/searchajax.html?keyword=&cty=${this.hotall}&ctl=${this.ctl}&sctl=&tsg=0&st=&et=&order=1&pageSize=10&currPage=1&tn=`,
     
    })
     this.parentlist=result.data.pageData.resultData
        
   } ,
    showPopup() {
      this.show = true;  
       
    },
  async  hotclick(value){
    if(value=="全国"){
        value=''
     }
     this.hotall=value 
      let result = await get({
      url: `https://search.damai.cn/searchajax.html?keyword=&cty=${this.hotall}&ctl=${this.ctl}&sctl=&tsg=0&st=&et=&order=1&pageSize=10&currPage=1&tn=`,
     
    })
     this.parentlist=result.data.pageData.resultData 
     this.show=false
    },
  async  allclick(value1){
          this.hotall=value1  
        let result = await get({
      url: `https://search.damai.cn/searchajax.html?keyword=&cty=${this.hotall}&ctl=${this.ctl}&sctl=&tsg=0&st=&et=&order=1&pageSize=10&currPage=1&tn=`,   
    })  
     this.parentlist=result.data.pageData.resultData  
         this.show=false
    },
    showPo(){
      this.showpo=true
    },
  async  handelchange(value1){
    console.log(this.hotall);
    console.log(this.ctl); 
    this.choosedate=moment(value1).format('YYYY-MM-DD')
     let result = await get({
      url: `https://search.damai.cn/searchajax.html?keyword=&cty=${this.hotall}&ctl=${this.ctl}&sctl=&tsg=5&st=${this.choosedate}&et=${this.choosedate}&order=1&pageSize=10&currPage=1&tn=`,   
    })  
     this.parentlist=result.data.pageData.resultData  
      this.showpo=false

    }
},
components: {
     Morelist,
  
}
,
   mounted () {
   this.hotcity=city.hotCities
   this.allcities=city.allCities
 if(this.$route.query.open){
   this.showpo=true
 }
 

}
}
</script>

<style lang="stylus" scoped>
  .class-container
     width 100%
     height 100%
     header       
       padding 0 0 0.24rem      
       width 100%
       height 2.05rem
       ul 
        height 1.15rem
        flex-direction row
        overflow-x scroll
        background white
        white-space nowrap
        li
         display inline-block
         height 100%
         line-height 1.15rem
         text-align center
         font-size 0.32rem
         padding 0 0.3rem
         color #111 
        .active
         border-bottom 2px solid #ff1268
       ol 
        height 0.9rem
        width 100%
        display flex
        flex-direction row
        li
         flex 1
         height 100%
         line-height 0.9rem
         text-align center 
         font-size 0.28rem
         color #111
         span 
          font-size 0.2rem
          color #AAA
     main 
       width 100%
       background white
       height 100%
      

    .hotcity
        p
         font-size 0.26rem
         color #333
         line-height 0.4rem
         padding 0.3rem 0 0 0.2rem
        ul
            display flex
            flex-direction row 
            flex-wrap wrap
            li
                height 0.72rem
                width 25%
                line-height 0.72rem
                font-size 0.268rem
                color #111 
                text-align center
                margin 0.16rem 0  0.16rem  0.3rem
                border 1px solid #AAA
    .allcity
      ol 
       background white
       li
        font-size 0.26rem
        color #333
        line-height 0.5rem
        width 100%
        h4 
         background #f2f3f4
         padding-left 0.2rem
        p
         background white
         width 100%
         padding-left 0.2rem
         line-height 0.91rem
         border-bottom 1px solid #e7e7e7



</style>